<template>
    <div>
        <div class="crumbs">
            <!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="indexTitle">项目管理</div>
                    <div class="contentsize">房间信息编辑</div>
                </el-breadcrumb-item>
            </el-breadcrumb> -->
            <div class="contentbox">
                <div class="contentsize">房间信息新增</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')" type="primary">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div style="overflow: hidden;margin-bottom: 10px;">
                <el-table :data="tableData" style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-style="tablerowColor" border>
                    <el-table-column prop="dabh" label="档案编号" align="center"> </el-table-column>
                    <el-table-column prop="fwdz" label="房屋地址" align="center" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="mh" label="门号" align="center"> </el-table-column>
                    <el-table-column prop="lc" label="所在楼层" align="center"> </el-table-column>
                    <el-table-column prop="fjh" label="房间号" align="center"> </el-table-column>
                    <el-table-column prop="hx" label="户型" align="center"> </el-table-column>
                    <el-table-column prop="cx" label="朝向" align="center"> </el-table-column>
                    <el-table-column prop="fwyt" label="房屋性质" align="center"> </el-table-column>
                    <el-table-column prop="jzmj" label="建筑面积" align="center"> </el-table-column>
                    <el-table-column prop="jizumj" label="计租面积" align="center"> </el-table-column>
                    <el-table-column prop="cqdw" label="产权单位" align="center"> </el-table-column>
                    <el-table-column fixed="right" label="操作" width="80" align="center">
                        <template slot-scope="scope">
                            <router-link :to="{ name: 'detailfj', params: { id: scope.row.id } }">
                                <el-button type="text" size="small">查看</el-button>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination background layout="total,prev, pager, next,jumper" :total="total" :current-page.sync="current"
                        :page-size="pageSize" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <!-- <div class="addtitle">新建</div> -->
            <div
                style="height:calc(100vh - 460px);overflow-y:auto;overflow-x:hidden;border: 2px solid #eeeeee;padding: 20px 8px;box-sizing: border-box;border-radius: 4px;">
                <el-form ref="form" :model="fjform" label-width="120px" :inline="true" label-position="right"
                    :rules="rules">
                    <el-form-item label="区属名称:" style="width: 30%" prop="qs">
                        <div style="width:190px">
                            <el-select v-model="fjform.qs" placeholder="请选择区属名称" clearable style="width: 100%" disabled>
                                <el-option v-for="item in qslist" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="房屋地址:" style="width: 60%" prop="fwdz">
                        <div style="width:500px">
                            <el-input v-model="fjform.fwdz" placeholder="请输入房屋地址" class="search-input" disabled></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="门号:" style="width: 30%" prop="mh">
                        <div style="width:190px">
                            <el-input v-model="fjform.mh" placeholder="请输入门号" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="房间号:" style="width: 30%" prop="fjh">
                        <div style="width:190px">
                            <el-input v-model="fjform.fjh" placeholder="请输入房间号" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="建筑面积:" style="width: 30%" prop="jzmj">
                        <div style="width:190px">
                            <el-input v-model="fjform.jzmj" placeholder="请输入建筑面积" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="产别:" style="width: 30%" prop="cb">
                        <div style="width:190px">
                            <el-select v-model="fjform.cb" placeholder="请选择产别类型" clearable style="width: 100%">
                                <el-option v-for="item in cblist" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="权证类型:" style="width: 30%" prop="qzlx">
                        <div style="width:190px">
                            <el-input v-model="fjform.qzlx" placeholder="请输入权证类型" class="search-input"></el-input>
                        </div>
                        <!-- <el-select v-model="fjform.qzlx" placeholder="请选择权证类型" clearable style="width: 100%">
                            <el-option v-for="item in qzlxlist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="计租面积:" style="width: 30%" prop="jizumj ">
                        <div style="width:190px">
                            <el-input v-model="fjform.jizumj" placeholder="请输入计租面积" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="房屋性质:" style="width: 30%" prop="fwyt">
                        <div style="width:190px">
                            <el-select v-model="fjform.fwyt" placeholder="请选择房屋性质" clearable style="width: 100%">
                                <el-option v-for="item in fwytlist" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- <el-input v-model="fjform.fwyt" placeholder="请输入房屋性质" class="search-input"></el-input> -->
                    </el-form-item>
                    <el-form-item label="证书编号:" style="width: 30%" prop="zsbh">
                        <div style="width:190px">
                            <el-input v-model="fjform.zsbh" placeholder="请输入证书编号" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="土地使用权面积:" style="width: 30%" prop="tdsyqmj">
                        <div style="width:190px">
                            <el-input v-model="fjform.tdsyqmj" placeholder="请输入土地使用权面积" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="产权单位:" style="width: 30%" prop="cqdw">
                        <div style="width:190px">
                            <el-select v-model="fjform.cqdw" placeholder="请选择产权单位" clearable style="width: 100%">
                                <el-option v-for="item in cqdwlist" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="发证日期:" style="width: 30%" prop="fzrq">
                        <div style="width:190px">
                            <el-date-picker type="date" placeholder="选择发证日期" v-model="fjform.fzrq" style="width: 100%"
                                value-format="yyyy-MM-dd"></el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="土地使用权类型:" style="width: 30%" prop="tdsyqlx">
                        <div style="width:190px">
                            <el-input v-model="fjform.tdsyqlx" placeholder="请输入土地使用权类型" class="search-input"></el-input>
                        </div>
                        <!-- <el-select v-model="fjform.tdsyqlx" placeholder="请选择土地使用权类型" clearable style="width: 100%">
                            <el-option v-for="item in tdsyqlxlist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="总楼层:" style="width: 30%" prop="zlc">
                        <div style="width:190px">
                            <el-input v-model="fjform.zlc" placeholder="请输入总楼层" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="所在楼层:" style="width: 30%" prop="lc">
                        <div style="width:190px">
                            <el-input v-model="fjform.lc" placeholder="请输入所在楼层" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="档案编号:" style="width: 30%" prop="dabh">
                        <div style="width:190px">
                            <el-input v-model="fjform.dabh" placeholder="请输入档案编号" class="search-input" disabled></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="原值:" style="width: 30%" prop="yz">
                        <div style="width:190px">
                            <el-input v-model="fjform.yz" placeholder="请输入原值" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="评估价格:" style="width: 30%" prop="pgjg">
                        <div style="width:190px">
                            <el-input v-model="fjform.pgjg" placeholder="请输入评估价格" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="户型:" style="width: 30%" prop="hx">
                        <div style="width:190px">
                            <el-select v-model="fjform.hx" placeholder="请选择户型" clearable>
                                <el-option v-for="item in hxlist" :key="item.code" :label="item.name" :value="item.code">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- <el-input v-model="fjform.hx" placeholder="请输入户型" class="search-input"></el-input> -->
                    </el-form-item>
                    <el-form-item label="朝向:" style="width: 30%" prop="cx">
                        <div style="width:190px">
                            <el-input v-model="fjform.cx" placeholder="请输入朝向" class="search-input"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item style="width: 100%" prop="cx">
                        <el-checkbox label="自来水表" name="type" v-model="fjform.zlsb"></el-checkbox>
                        <el-checkbox label="电表" name="type" v-model="fjform.db"></el-checkbox>
                        <el-checkbox label="煤气表" name="type" v-model="fjform.mqb"></el-checkbox>
                        <el-checkbox label="物业费" name="type" v-model="fjform.wyf"></el-checkbox>
                        <el-checkbox label="供热" name="type" v-model="fjform.gr"></el-checkbox>
                        <el-checkbox label="中水水表" name="type" v-model="fjform.zssb"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="备注:" style="width: 100%" prop="note">
                        <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入备注" v-model="fjform.note"
                            style="width: 100%;">
                        </el-input>
                    </el-form-item>
                    <!-- 是否支持多文进上传 multiple -->
                    <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                        :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                        :file-list="filefileList">
                        <div class="unloadTitle">附件</div>
                        <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                    </el-upload>
                    <div class="buttonCenter">
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    </div>
                </el-form>
            </div>

        </div>
    </div>
</template>
<script>
import { roomlist, roomadd } from '@/api/index';
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'addfj',
    data() {
        return {
            httpUrl: global.httpUrl,//公共地址
            qslist: valueList.qslist,//区属
            cqdwlist: valueList.cqdwlist,//产权单位
            fwytlist: valueList.fwytlist,//房屋性质
            cblist: valueList.cblist,//产别
            sflist: valueList.sflist,//是否列表
            jzxslist: valueList.jzxslist,//建筑形式列表
            fwjglist: valueList.fwjglist,//房屋结构列表
            gfdwlist: valueList.gfdwlist,//管房单位
            hxlist: valueList.hxlist,//户型
            filefileList: [],//文件列表
            fileListshandle: [],
            // 请求表头信息
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            fjform: {
                create_name: localStorage.getItem('username'), //创建人 ,
                create_name_id: localStorage.getItem('userid'), //创建人id ,
                zlsb: false,
                db: false,
                mqb: false,
                gr: false,
                zssb: false,
                wyf: false,
                fj: '',
                gfdw: this.$store.getters.gfdw,
            },//房间表单
            rules: {
                name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
                beginTime: [{ type: 'date', required: true, message: '请选择开工时间', trigger: 'change' }],
                completionTime: [{ type: 'date', required: true, message: '请选择计划竣工时间', trigger: 'change' }],

                chargenameB: [{ required: true, message: '请输入乙方负责人', trigger: 'blur' }],
                phoneB: [
                    { required: true, message: '请输入乙方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ],
                company: [{ required: true, message: '请输入乙方公司名称', trigger: 'blur' }],
                chargenameA: [{ required: true, message: '请输入甲方项目负责人', trigger: 'blur' }],
                phoneA: [
                    { required: true, message: '请输入甲方负责人电话', trigger: 'blur' },
                    // { type: 'number', message: '电话必须为数字值'}
                ]
            },
            buildid: '',
            total: 0,
            current: 1,
            pageSize: 10,
            tableData: [],
            form: {
                gfdw: this.$store.getters.gfdw,
                buildid: '',
                current: 1, //第几页
                pageSize: 10 //每页数量
            }
        };
    },
    methods: {
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f7f7;color:black;height: 54px;font-weight: 500;font-size:14px;font-variant:tabular-nums'
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;'
        },
        // 创建
        submitForm() {
            var that = this
            roomadd(this.fjform).then((res) => {
                if (res.code == 200) {
                    this.$message.success('录入成功');
                    that.current = 1
                    that.form.current = 1
                    that.roomlist(that.form);
                    this.fjform = {
                        create_name: localStorage.getItem('username'), //创建人 ,
                        create_name_id: localStorage.getItem('userid'), //创建人id ,
                        zlsb: false,
                        db: false,
                        mqb: false,
                        gr: false,
                        zssb: false,
                        wyf: false,
                        fj: '',
                    }
                    this.filefileList = []
                } else {
                    this.$message.error('录入失败');
                }
            });

            console.log('提交确定');
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileListshandle = fileList.map((res) => {
                return res.response.data.id;
            });
            this.fjform.fj = this.fileListshandle.toString()
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.$message.success('导入成功');
            this.fileListshandle = fileLists.map((res) => {
                console.log(res.response.data)
                return res.response.data.id;
            });
            this.fjform.fj = this.fileListshandle.toString()
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.form.current = val;
            this.roomlist(this.form);
            console.log(val);
        },
        // 项目列表
        roomlist(data) {
            roomlist(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.tableData = [];
                    this.total = 0;
                }
            });
        }
    },
    created() {
        this.buildid = this.$route.params.id;
        this.fjform.buildid = this.$route.params.id;
        this.fjform.dabh=this.$route.params.dabh;
        this.fjform.fwdz=this.$route.params.fwdz;
        this.fjform.qs=this.$route.params.qs;
        console.log(this.$route.params)
        this.form.buildid = this.$route.params.id
        this.roomlist(this.form);
        console.log(global.httpUrl)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}
</style>